import React from 'react';
import { connect } from 'umi';
import IconList from "../../components/option/icon/IconList";
import IconModal from '../../components/option/icon/IconModal';
import FetchModal from '../../components/option/icon/FetchModal';
import IconToolBar from '../../components/option/icon/IconToolBar';
import IconSearch from '../../components/option/icon/IconSearch';
import TablePagination from '../../components/common/TablePagination';
import { Spin } from 'antd';

const IconPage = (props) => {

  const { dispatch, globalModel, iconModel } = props;
  const {
    iconLoading, iconList, iconModalVisible, iconInfoData, total, currentPage, pageSize, searchParams, browserType,
    fetchModalVisible
  } = iconModel;

  const iconSearchProps = {
    onSearch: (searchParams) => {
      dispatch({type: "iconModel/updateState", payload: {searchParams}});
      dispatch({type: 'iconModel/getListDatas', payload: {currentPage, pageSize, ...searchParams}});
    },
    onReset: () => {
      dispatch({type: "iconModel/updateState", payload: {searchParams: null}});
    },
  };

  const iconToolBarProps = {
    onFetch: (type) => {
      dispatch({ type: "iconModel/updateState", payload: { fetchModalVisible: true }});
    },
    onExport: () => {
      dispatch({ type: "iconModel/onExportIcons", payload: {}});
    }
  };

  const iconListProps = {
    iconList,
    currentPage,
    pageSize,
    onEditMenu: (menuInfoData) => {
      dispatch({ type: "iconModel/updateState", payload: { menuInfoData, menuModalVisible: true }});
    },
    onDelete: (record) => {
      dispatch({ type: "iconModel/onDelete", payload: record });
    },
    onViewIcon: (record) => {
      dispatch({ type: "iconModel/updateState", payload: { iconInfoData: record, iconModalVisible: true }});
    }
  };

  const fetchModalProps = {
    fetchModalVisible,
    browserType,
    onChangeBrowser: (e) => {
      dispatch({type: "iconModel/updateState", payload: { browserType: e.target.value }});
    },
    onFetch: (type) => {
      dispatch({ type: "iconModel/fetchIcons", payload: { browserType }});
    },
    onCancel: () => {
      dispatch({ type: "iconModel/updateState", payload: { fetchModalVisible: false }});
    }
  };

  const iconModalProps = {
    iconModalVisible,
    iconInfoData,
    onCancel: () => {
      dispatch({ type: "iconModel/updateState", payload: { iconModalVisible: false }});
    }
  };

  const tablePaginationProps = {
    total,
    currentPage,
    pageSize,
    onPageChange: (currentPage, pageSize) => {
      dispatch({type: 'iconModel/getListDatas', payload: {currentPage, pageSize, ...searchParams}});
    },
    onShowSizeChange: (currentPage, pageSize) => {
      dispatch({type: 'iconModel/getListDatas', payload: {currentPage, pageSize, ...searchParams}});
    },
  };

  return (
    <div style={{ padding: "15px" }}>
      <Spin spinning={iconLoading}>
        <IconSearch {...iconSearchProps} />
        <IconToolBar {...iconToolBarProps} />
        <IconList {...iconListProps} />
        <TablePagination {...tablePaginationProps} />

        <IconModal {...iconModalProps} />
        <FetchModal {...fetchModalProps} />
      </Spin>
    </div>
  );
};

function mapStateToProps({ globalModel, iconModel }) {
  return { globalModel, iconModel };
}

export default connect(mapStateToProps)(IconPage);
